<template>
	<view class="wrap ">
		<view class="search_Tops  ">
			<view class="p30">
				<u-search @search="searchs" @custom="searchs" :show-action="true" action-text="搜索" :animation="true" :clearabled="true"
				 placeholder="搜索关键词" v-model="keyword"></u-search>
				<view class="tabs">
					<u-tabs :list="list" active-color="#1BBF80" :is-scroll="false" font-size="32" :current="current" @change="change"></u-tabs>
				</view>
			</view>
			
			<view v-show="current == 0" class="navs ">
				<view @tap="navTab(0,'created_date')" :class="{acts:orderField == 'created_date'}">
					综合
				</view>
				<view @tap="navTab(1,'sales')" :class="{acts:orderField == 'sales'}">
					销量
				</view>
				<view @tap="navTab(2,'price')" :class="{acts:orderField == 'price'}">
					人气
					<image v-show=" orderField == 'price' && orderType == 'asc'" class="vm" src="../../static/image/daoxu.png" mode=""></image>
					<image v-show="orderField == 'price' &&  orderType == 'desc' " class="vm" src="../../static/image/zhengxu.png"
					 mode=""></image>
				</view>
				<view @tap="navTab(3,'hits')" :class="{acts:orderField == 'hits'}">
					价格
					<image v-show=" orderField == 'hits' && orderType == 'asc'" class="vm" src="../../static/image/daoxu.png" mode=""></image>
					<image v-show="orderField == 'hits' &&  orderType == 'desc' " class="vm" src="../../static/image/zhengxu.png" mode=""></image>
				</view>
			</view>
		</view>
		<view :class="[current == 0 ? 'contens1' :'contens2']">
			<goodsData :keyword="keyword" ref="goodsDatas" :url="goodsUrl" goodsType="2" v-show="current == 0"></goodsData>

			<dynamicIndex ref="dynamics" :url="DynamicUrl" :keyword="keyword" v-show="current == 1"></dynamicIndex> 
			<ji ref="ji" v-show="current == 2"></ji>
		</view>

	</view>
</template>

<script>
	import ji from './ji.vue' 
	import {
		DynamicListUrl,
		productListUrl
	} from '../../api/api.js'
	import {
		mapState,
		mapActions
	} from "vuex";
	import dynamicIndex from '../../components/dynamic/dynamic-Index.vue'
	export default {
		components: { 
			ji,dynamicIndex
		},
		data() {
			return {
				DynamicUrl: DynamicListUrl,
				goodsUrl: productListUrl,
				keyword: '',
				list: [{
					name: '商品'
				}, {
					name: '动态'
				}, {
					name: '集市'
				}],
				current: 0,
				orderField: 'created_date',
				orderType: 'desc',
			};
		},
		onReachBottom() {
			if (this.keyword != '') {
				if (this.current == 0) {
					this.$refs['goodsDatas'].checking()
					uni.setStorageSync('orderField', this.orderField)
					uni.setStorageSync('orderType', this.orderType)
				}
				if (this.current == 1) {
					this.$refs['dynamics'].checking()
				} 
			}
			if (this.current == 2) {
				this.$refs['ji'].checking()
			}
		},
		methods: {
			navTab(i, type) {
				if (this.keyword == '') {
					this.orderField = type
				} else {
					if (type == this.orderField) {
						if (this.orderType == 'desc') {
							this.orderType = 'asc'
						} else {
							this.orderType = 'desc'
						}
					} else {
						this.orderType = 'desc'
						this.orderField = type
					}
				}
				uni.setStorageSync('orderField', this.orderField)
				uni.setStorageSync('orderType', this.orderType)
				this.$refs['goodsDatas'].inits()
			},
			change(index) {
				this.current = index;
			},
			searchs() {
				if (this.keyword == '') {
					this.$u.toast(`请输入关键词`);
				} else {
					this.$store.commit("search", this.keyword);
					if (this.current == 0) {
						this.$refs['goodsDatas'].inits()
						uni.setStorageSync('orderField', this.orderField)
						uni.setStorageSync('orderType', this.orderType)
					}
					if (this.current == 1) {
						this.$refs['dynamics'].inits()
					}
					if (this.current == 2) {
						this.$refs['ji'].search()
					}

				}

			},
		}
	}
</script>

<style lang="less" scoped>
	@import './index';
</style>
